/*
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-06-09 15:48:26
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-06-18 13:10:22
 * @FilePath: /dynamic-menu/src/pages/login/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from "react";
import { LoginFormPage, ProFormText } from "@ant-design/pro-components";
import { message } from "antd";
import {
  UserOutlined,
  LockOutlined,
} from "@ant-design/icons";
import axios from "axios";
import { history, useModel } from "umi";
const Login: React.FC = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [loading,setLoading] = useState(false);
    const { initialState,setInitialState,refresh } =
    useModel('@@initialState');
  const onFinish = async (values: any) => {
    console.log("Login values:", values);
    setLoading(true);
    try{
      const response = await axios.post("/api/login", values);
      setLoading(false);
      const { code, data, msg } = response.data;
      if (code !== 200) {
        return messageApi.error(msg || "登录失败，请重试");
      }
      const { userInfo, token } = data;
      console.log("Login successful:", userInfo, token);
      localStorage.setItem("token", token);
      // 刷新初始状态以获取最新权限数据
      await setInitialState({currentUser: userInfo} as any);
      // 使用window.open打开新页面，并替换当前窗口的URL，为了保证每次进入都会执行app.tsx
      window.open("/", "_self")
    } catch (error) {
      console.error("Login failed:", error);
    }
    setLoading(false);
  };
  return (
    <div style={{
      backgroundColor:'white',
      height:'100vh',
    }}>
      {contextHolder}
      <LoginFormPage
        title="Dynamic Menu System"
        subTitle="动态菜单系统"
        loading={loading}
        onFinish={onFinish}
        backgroundImageUrl="https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*y0ZTS6WLwvgAAAAAAAAAAAAADml6AQ/fmt.webp"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.4)',
          backdropFilter: 'blur(4px)',
          
        }}
      >
        <ProFormText
          name="username"
          fieldProps={{
            size: "large",
            prefix: <UserOutlined className={"prefixIcon"} />,
          }}
          placeholder={"用户名: admin or user"}
          rules={[
            {
              required: true,
              message: "请输入用户名!",
            },
          ]}
        />
        <ProFormText.Password
          name="password"
          fieldProps={{
            size: "large",
            prefix: <LockOutlined className={"prefixIcon"} />,
          }}
          placeholder={"密码: 123456"}
          rules={[
            {
              required: true,
              message: "请输入密码！",
            },
          ]}
        />
      </LoginFormPage>
    </div>
  );
};

export default Login;

